<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    <meta name="author" content="">
    <title>Stargym-gallery</title>
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet"  type="text/css" >
    <link href="../assets/css/bootstrap-grid.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.css" rel="stylesheet">
    <link href="../assets/css/zoomslider.css" rel="stylesheet">
    <link href="../assets/css/swiper.css" rel="stylesheet">
    <link href="../assets/css/swipebox.css" rel="stylesheet">
    <link href="../assets/css/style-pink.css" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/jquery-ui.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700%7CFira+Sans:400,500,600,700,800,900" rel="stylesheet">
    <script type="text/javascript" src="../assets/js/modernizr-2.6.2.min.js"></script>
</head>
<body>

<div>&ensp;</div>
<div class="container">
    <h1>我们<span class="someFront">诚心推荐</span></h1>
</div>

<div id="slidershow" class="carousel slide" data-ride="carousel" data-interval="2000" style="margin-left: 20%; width:60%; height: 60%;">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators" >
        <li class="active" data-target="#slidershow" data-slide-to="0" ></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="../images/lunbo1.jpg" id="lunbo1" width="100%" alt="" onclick="goFirstHotCourseDetail()"></a>
            <div class="carousel-caption someFront">
                <h3 class="someFront" id="no1Name"></h3>
                <p id="no1Type"></p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="../images/lunbo2.jpg" id="lunbo2" width="100%" alt="" onclick="goSecondHotCourseDetail()"></a>
            <div class="carousel-caption someFront">
                <h3 class="someFront" id="no2Name"></h3>
                <p id="no2Type"></p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="../images/lunbo3.jpg" id="lunbo3" width="100%" alt="" onclick="goThirdHotCourseDetail()"></a>
            <div class="carousel-caption someFront">
                <h3 class="someFront" id="no3Name"></h3>
                <p id="no3Type"></p>
            </div>
        </div>
    </div>
    <div>
    <a class="left carousel-control " href="#slidershow" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>
</div>

<div style="margin-left: 30%; width:60%;">
    <button type="button" class="btn btn-default margin-left: 30%;" id="btn1">播放</button>
    <button type="button" class="btn btn-default" id="btn2">暂停</button>
    <button type="button" class="btn btn-default" id="btn3">上一帧</button>
    <button type="button" class="btn btn-default" id="btn4">下一帧</button>
    <div id="result"></div>
</div>
<script>

    $(function(){

        $('#btn1').click(function(){

            $("#slidershow").carousel('cycle');

        });

        $('#btn2').click(function(){

            $("#slidershow").carousel('pause');

        });

        $('#btn3').click(function(){

            $("#slidershow").carousel('prev');

        });

        $('#btn4').click(function(){

            $("#slidershow").carousel('next');

        });

        $("#slidershow").on("slid.bs.carousel",function(e){

            $('#result').html('当前正在显示第' + ($(e.relatedTarget).index()+1) + '张图片');

        })

    })
</script>


<div>&ensp;</div>
<div>&ensp;</div>
<div>&ensp;</div>
<div class="container">
    <h1>您的 <span class="someFront">已购课程</span></h1>
</div>


<div class="gallery-page gallery-2">
    <div class="container">
        <div class="row someFront" id="paidCoursePlace">

        </div>
    </div>
</div>
<input type="hidden" id="firstHotClassId">
<input type="hidden" id="secondHotClassId">
<input type="hidden" id="thirdHotClassId">
</body>

<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function (){

        let currentUserId = $.cookie("userid");
        jQuery.post("/getCourseSelectedList", {"userId": currentUserId},function(rst){//处理响应的结果

            let body = "";
            for(let i = 0; i < rst.length; i++)
            {
                let json = rst[i];

                body += "<div class=\"col-lg-6 col-md-6 col-sm-6 col-ms-6\">";
                body += "<div class=\"item matchHeight\">";
                // body += "<a class=\"swipebox photo\"><img class=\"full-width\" alt=\"Gallery\"></a>";
                body += "<div class=\"descr\">";
                body += "<div class=\"row\">";
                body += "<div class=\"col-lg-6 col-md-8 col-sm-12 col-xs-12\">";
                body += "<div class=\"header\">课程名：\""+ json.courseName +"\"</div>";
                body += "<div class=\"subheader\">价格：\""+ json.coursePrice +"\"</div>";
                body += "<div class=\"subheader\">付款日期：\""+ json.paidDate +"\"</div>";
                body += "<div class=\"subheader\">课程类型：\""+ json.courseType +"\"</div>";
                body += "</div>";
                body += "<div class=\"col-lg-6 col-md-4 col-sm-12 col-xs-12 col-ms-12 right\">";
                body += "<ul>";
                body += "<li class=\"glyphicon glyphicon-menu-right someFront\"><a href='#' onclick='goCourseDetail(\""+json.courseId+"\")'>详情</a></li>";
                body += "<li class=\"glyphicon glyphicon-remove someFront\"><a href='#' onclick='dropOutCourse(\""+json.courseId+"\")'>退课</a></li>";
                body += "</ul>";
                body += "</div>";
                body += "</div>";
                body += "</div>";
                body += "</div>";
                body += "</div>";
            }
            jQuery("#paidCoursePlace").html(body);
        },"json");//表示返回数据的格式


        jQuery.post("/getCourseListOrderByHot",function(rst){//处理响应的结果
            let num = rst.length;
            if(num > 0){
                let firstCourse = rst[0];
                $("#no1Name").html(firstCourse.courseName);
                $("#no1Type").html(firstCourse.courseType);
                $("#firstHotClassId").val(firstCourse.courseId);
            }
            if(num > 1){
                let secondCourse = rst[1];
                $("#no2Name").html(secondCourse.courseName);
                $("#no2Type").html(secondCourse.courseType);
                $("#secondHotClassId").val(secondCourse.courseId);
            }
            if(num > 2){
                let thirdCourse = rst[2];
                $("#no3Name").html(thirdCourse.courseName);
                $("#no3Type").html(thirdCourse.courseType);
                $("#thirdHotClassId").val(thirdCourse.courseId);
            }
        },"json");//表示返回数据的格式

    });

    function goCourseDetail(id){
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

    function dropOutCourse(id){
        let currentUserId = $.cookie("userid");
        jQuery.post("/dropCourse", {"userId": currentUserId, "courseId": id}, function (rst){
            if (rst == "退课成功"){
                rst = rst + "，钱款已经退还到账户。"
            }
            alert(rst);
            window.location.reload();
        })
    }

    function goFirstHotCourseDetail(){
        let id = $("#firstHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }
    function goSecondHotCourseDetail(){
        let id = $("#secondHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }
    function goThirdHotCourseDetail(){
        let id = $("#thirdHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }
</script>

</html>
<style type="text/css">
    .someFront{
        color: rgb(250,98,15);
    }
    .someFront1{
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 20px;
        color: rgb(250,98,15);
        border:none;
    }
</style>